﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>权限管理</title>
<link href="../../../css/layout.css" rel="stylesheet" type="text/css" />
<link href="../../../css/cb.css" rel="stylesheet" type="text/css" />
<link href="../../../css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="../../../easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="../../../easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="../../../easyui/demo/demo.css" />
<script type="text/javascript" src="../../../easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="../../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../../js/vue/vue.min.js"></script>
<script type="text/javascript" src="../../../js/laypage/laypage.js"></script>
<link rel="stylesheet" href="../../../js/ztree/demo.css" type="text/css">
<link rel="stylesheet"
	href="../../../js/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript"
	src="../../../js/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript"
	src="../../../js/ztree/jquery.ztree.excheck.min.js"></script>
</head>
<body>
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left" background="../../../images/b2.jpg"><img
				src="../../../images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="../../../images/b2.jpg"><table
					width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="../../../images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">查找角色信息</td>
					</tr>
				</table></td>
			<td width="31%" align="right" background="../../../images/b2.jpg"><img
				src="../../../images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4" style="font-size: 10px">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<form id="form1" name="form1">
					<table width="80%" border="0" cellspacing="1" cellpadding="3">
						<tr>
							<td width="10%" align="right">角色名称:</td>
							<td width="10%" align="left"><input name="roleName"
								type="text" id="roleName" size="15" /></td>
							<td width="10%" align="left"><input type="button"
								name="query" value="查找" onclick="queryEvent()" /></td>
							<td width="10%" colspan="2" align="right"><input
								type="button" onclick="addEvent()" name="add" value="增加记录" /> <input
								type="button" name="export" value="导出Excel" /></td>
						</tr>
					</table>
				</form>
			</td>
		</tr>
	</table>

	<table width="50%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="5"></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left" background="../../../images/b2.jpg"><img
				src="../../../images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="../../../images/b2.jpg"><table
					width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="../../../images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">角色信息列表</td>
					</tr>
				</table></td>
			<td width="31%" align="right" background="../../../images/b2.jpg"><img
				src="../../../images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4;font-size: 10px"
		id="app" >
		<tr>
			<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
			<td align="center" bgcolor="#EFFBFE">角色名称</td>
			<td align="center" bgcolor="#EFFBFE">角色描述</td>
			<td align="center" bgcolor="#EFFBFE">创建时间</td>
			<td align="center" bgcolor="#EFFBFE">状态</td>
			<td align="center" bgcolor="#EFFBFE">操作类型</td>
		</tr>
		<tr onmouseout="this.style.backgroundColor='#ffffff'"
			bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'"
			v-for="(item,index) in result">

			<td height="25" align="center"><input name="id[]" value=""
				type="checkbox" />{{index+1}}</td>
			<td align="center" class="t5"><div align="center">
					<strong>{{item.roleName}}</strong>
				</div></td>
			<td align="center">{{item.roleDesc}}</td>
			<td align="center">{{new
				Date(item.createTime).toLocaleString()}}</td>
			<td align="center" v-if="item.status==1">启用</td>
			<td align="center" v-else>禁用</td>
			<td align="left">
				<div align="left" style="padding-left: 5px">
					<div align="center">
						<input type="button" @click="checkEvent(item.id)" name=""
							value="查看" /> <input type="button" @click="editEvent(item.id)"
							name="" value="修改" /> <input type="button"
							@click="delEvent(item.id)" name="" value="删除" />
					</div>
				</div>
			</td>
		</tr>

		<tr>
			<td colspan="7" align="center">
				<div id="pagenav"></div>
			</td>
		</tr>
	</table>
	<!-- 增加用户弹出框 -->
	<div id="dlg"></div>
	<!-- 修改用户弹出框 -->
	<div id="dlg1"></div>
	<!-- 查看用户弹出框 -->
	<div id="dlg2"></div>
</body>
<script type="text/javascript">
	//vuejs
	var app = new Vue({
		el : '#app',
		data : {
			result : []
		}
	});

	Vue.filter('moment', function(value, formatString) {
		formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
		return moment(value).format(formatString);
	});

	//查询角色数据
	var getPageList = function(curr) {
		$.ajax({
			type : "post",
			dataType : "json",
			url : "/sysrole/search",
			data : {
				"roleName" : $('#roleName').val(),
				"pageNum" : curr || 1,
				"pageSize" : 10
			},
			success : function(msg) {
				app.result = msg.data[0].list;
				laypage({
					cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
					pages : msg.data[0].pages, //总页数
					first : "首页",
					last : "尾页",
					skip : true, //是否开启跳页
					skin : '#5675A2',
					curr : curr || 1, //当前页
					jump : function(obj, first) { //触发分页后的回调
						if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
							getPageList(obj.curr);
						}
					}
				});
			}
		});
	}

	//页面加载，查询角色
	getPageList();

	//模糊查询角色事件
	var queryEvent = function() {
		getPageList();
	}
	//增加角色事件
	var addEvent = function() {
		$('#dlg').dialog({
			type : 2,
			title : '角色管理-增加',
			width : 520,
			height : 580,
			closed : false,
			cache : false,
			href : '/sysrole/toAdd',
			modal : true,
			buttons : [ {
				text : '保存',
				iconCls : 'icon-ok',
				handler : function() {
					$.ajax({
						type : "POST",
						dataType : "json",
						url : "/sysrole/doAdd",
						data : {
							roleName : $('#roleName_add').val(),
							roleDesc : $('#roleDesc_add').val(),
							status : $('#status_add').val(),
							strArr : JSON.stringify(nodes)
						},
						success : function(result) {
							$.messager.alert({
								title : '消息',
								msg : result.message,
								icon : 'info'
							});
							getPageList();
							$('#dlg').dialog('close');
						}
					});
				}
			}, {
				text : '关闭',
				handler : function() {
					$('#dlg').dialog('close');
				}
			} ]
		});
	}

	//修改角色
	var editEvent = function(id) {
		$('#dlg1').dialog({
			type : 2,
			title : '权限管理-修改',
			width : 520,
			height : 580,
			closed : false,
			cache : false,
			href : '/sysrole/toEdit?id=' + id,
			modal : true,
			buttons : [ {
				text : '保存',
				iconCls : 'icon-ok',
				handler : function() {
					$.ajax({
						type : "POST",
						dataType : "json",
						url : "/sysrole/doEdit",
						data : {
							id : $('#role_id').val(),
							roleName : $('#roleName_edit').val(),
							roleDesc : $('#roleDesc_edit').val(),
							status : $('#status_edit').val(),
							strArr : JSON.stringify(nodes)
						},
						success : function(result) {
							$.messager.alert({
								title : '消息',
								msg : result.message,
								icon : 'info'
							});
							getPageList();
							$('#dlg1').dialog('close');
						}
					});
				}
			}, {
				text : '关闭',
				handler : function() {
					$('#dlg1').dialog('close');
				}
			} ]
		});
	}

	//查看角色详情
	var checkEvent = function(id) {
		$('#dlg2').dialog({
			type : 2,
			title : '角色管理-授权',
			width : 520,
			height : 580,
			closed : false,
			cache : false,
			href : '/sysrole/detail?id=' + id,
			modal : true
		});
	}

	//删除角色
	var delEvent = function(id) {
		$.messager.confirm('提示框', '你确定要删除吗?', function(res) {
			if (res) {
				//确认删除
				$.ajax({
					url : "/sysrole/doDel",
					data : {
						"id" : id
					},
					type : "get",
					datatype : "json",
					success : function(result) {
						$.messager.alert({
							title : '消息',
							msg : result.message,
							icon : 'info'
						});
						getPageList();//更新分页
					}
				});
			} else {
				//取消删除
			}
		});
	}
</script>
</html>